<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-home"></i> 兑换中心
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="Library">
                <!-- 标题图标 -->
                <div class="wk-icon">
                    <i class="iconfont icon-wenkuba"></i>
                </div>
                <!-- 引导语 -->
                <p class="font-tips">输入兑换码即可兑换财富值</p>
                <div class="input-down">
                    <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
                        <el-form-item prop="rechargeCdk">
                            <el-input placeholder="请输入Cdk兑换码" v-model="dataForm.rechargeCdk" class="input-with-select"
                                size="medium" width="50px" clearable>
                                <el-button slot="append" class="btn-down" @click="dataFormSubmit()" :loading="loading"
                                    @keyup.enter="dataFormSubmit()">兑换财富值</el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <div class="contact">
                    <p>不会使用？点击查看
                        <a href="#" @click="centerDialogVisible = true">下载教程</a>
                    </p>
                    
                </div> -->
                <!-- Dialog -->
                <!-- <el-dialog title="下载教程" :visible.sync="centerDialogVisible" width="60%" center>
                    <img src="../../assets/down.gif" alt>

                </el-dialog> -->
            </div>
          </p>
          <p class="alink">
            <a href="https://detail.tmall.com/item.htm?spm=a212k0.12153887.0.0.3099687dbWcYIA&id=593730522739"
               target="_blank"
               style="color:#030303;">CDK充值码购买点我
            </a>
          </p>
        </div>
    </div>
</template>

<script>
    import {
        isURL
    } from "@/utils/validate";
    export default {
        name: "basetable",
        data() {

            return {
                remsg: false,
                loading: false,
                dataForm: {
                    rechargeCdk: ""
                },
                dataRule: {
                    rechargeCdk: [{
                            required: true,
                            message: "兑换码不能为空",
                            trigger: "blur"
                        }

                    ]
                }
            };
        },

        methods: {
            dataFormSubmit() {
                this.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http({
                                url: this.$http.adornUrl(`/app/exchangeRechargeIntegralCdk`),
                                method: "post",
                                data: this.$http.adornData({
                                    rechargeCdk: this.dataForm.rechargeCdk
                                })
                            })
                            .then(({
                                data
                            }) => {
                                this.loading = false;
                                if (data && data.code === 0) {
                                    this.dataForm.rechargeCdk = "";
                                    this.$message.success(data.msg);

                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                this.$message.error("请求失败,请重试");
                            });
                    }
                });
            },

        }
    };

</script>

<style lang="less">
    .table {
        width: 100%;
        height: 90%;

        .container {
            height: 100%;
            position: relative;
            padding-right: 20px;

            .Library {
                margin-top: 150px;
                text-align: center;

                .wk-icon {
                    margin-bottom: 26px;

                    .icon-wenkuba {
                        font-size: 66px;
                        color: #16c79d;
                    }
                }

                .font-tips {
                    color: #16c79d;
                    letter-spacing: 12px;
                    margin-bottom: 36px;
                }

                .input-down {
                    .el-form {
                        width: 50%;

                        transform: translate(50%, 0);
                    }

                    .btn-down {
                        background-color: #16c79d;
                        color: white;
                        font-size: 16px;
                        letter-spacing: 2px;
                    }

                    .el-form-item__error {
                        margin-top: 5px;
                        position: static;
                    }
                }

                .contact {

                    // margin-top: 110px;
                    p {
                        font-size: 14px;
                        color: #999999;
                    }

                    a {
                        color: #16c79d;
                        text-decoration: underline;
                    }
                }


            }

            // 公告
            .announcement {
                width: 65%;
                height: 60px;
                // background-color: #ccc;
                text-align: center;
                line-height: 60px;
                position: absolute;
                font-size: 18px;
                color: red;
                top: 20px;
                left: 50%;
                transform: translate(-50%, 0);

                .icon-gonggao1 {
                    margin-right: 10px;
                    color: red;
                    font-size: 20px;
                }
            }

            .icon-hongbao1 {
                font-size: 30px;
                margin-right: 10px;
                color: red;
            }


        }
    }

</style>
